<script setup>
const sections = [
  {
    title: "走进坤石", items: [{
      name: "坤石介绍",
      link: "/#/introduce"
    }, {
      name: "坤石业务",
      link: "/#/business"
    }, {
      name: "坤石文化",
      link: "/#/culture"
    }, {
      name: "坤石荣誉",
      link: "/#/honor"
    }, {
      name: "坤石团队",
      link: "/#/team"
    }]
  },
  {
    title: "咨询中心",
    items: [{
      name: "核心业务",
      link: "/#/core"
    }, {
      name: "项目流程",
      link: "/#/process",
    }, {
      name: "股权激励研究院",
      link: "/#/equity",
    }, {
      name: "财税风控研究院",
      link: "/#/tax",
    }, {
      name: "品牌策划研究院",
      link: "/#/brand",
    }, {
      name: "精益生产研究院",
      link: "/#/production",
    }, {
      name: "企业陪跑",
      link: "/#/run",
    }]
  },
  {
    title: "培训中心", items: [{
      name: "企业管理",
      link: "/#/advantage",
    }, {
      name: "创新管理",
      link: "/#/advantage",
    }, {
      name: "财务会计",
      link: "/#/advantage",
    }, {
      name: "人力资源管理",
      link: "/#/advantage",
    }, {
      name: "市场营销",
      link: "/#/advantage",
    }, {
      name: "项目管理",
      link: "/#/advantage",
    }, {
      name: "法律法规",
      link: "/#/advantage",
    }]
  },
  {
    title: "课程中心", items: [{
      name: "咨询式内训",
      link: "/#/train",
    }, {
      name: "创新管理学院",
      link: "/#/innovation",
    }, {
      name: "企业商学院",
      link: "/#/advantage",

    }]
  },
  {
    title: "尧君智库", items: [{
      name: "官网主页",
      link: "https://www.yaojunzhiku.com/#/index",
      target: "_blank"
    }, {
      name: "关于尧君",
      link: "https://www.yaojunzhiku.com/#/about",
      target: "_blank"
    }]
  },
  {
    title: "关于我们", items: [{
      name: "合作渠道",
      link: "/#/channel",
    }, {
      name: "联系我们",
      link: "/#/about",
    }]
  }
]
</script>

<template>
  <!-- 页脚组件 -->
  <footer>
    <div class="footer-contact flex flex-between flex-item-center">
      <div class="wrap flex flex-between flex-item-center ">
        <div class="cleft">
          <a href="/" class="l-logo"><img src="@/assets/image/ks-zx.png" alt="坤石咨询" width="90" height="90"></a>
          <div class="flex">
            <div class="m-l-30 flex flex-item-center">
              <div class="tit">微信客服</div>
              <img width="90" height="90" src="https://www.chinaydfl.com/upfile/image/20210424/1619231492_485750.jpg">
            </div>
            <div class="m-l-30 flex flex-item-center">
              <div class="tit">微信公众号</div>
              <img width="90" height="90" src="https://www.chinaydfl.com/upfile/image/20210424/1619231492_485750.jpg">
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="cright">
          <div class="msgdiv">
            <div class="tt">咨询热线</div>
            <div class="dd">星期一至星期日，24小时在线</div>
            <a href="tel:400-128-1289" class="tel" target="_blank">400-128-1289</a>
          </div>
          <a href="https://tb.53kf.com/code/client/74e42209649ab3022c9bc1cbcb73661d9/1" class="r-btn flex-center"
             target="_blank">咨询在线客服</a>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="footer-box">
        <div v-for="section in sections" :key="section.title">
          <div class="ul-title">{{ section.title }}</div>
          <ul>
            <li v-for="item in section.items" :key="item">
              <a :href="item.link" :target="item.target" class="li-link">{{ item.name }}</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="bottom-bar">
        <span style="color: #606060;">Copyright ©2024 杭州坤石理咨询有限公司
          <a style="color: #606060;" href="https://beian.miit.gov.cn" target="_blank"
             rel="noopener">粤ICP备11004398号</a> &nbsp;</span>
      </div>
    </div>
  </footer>
</template>

<style scoped>
footer {
  background-color: #1e1e1e;
  color: #fff;
}

.footer-contact {
  background-color: #161616;
  height: 150px;

  .cleft {
    display: flex;
    justify-content: space-between;
    width: 50%;
    align-items: center;

    .tit {
      width: 28px;
      height: 90px;
      background-color: #393939;
      font-size: 13px;
      color: rgba(255, 255, 255, .8);
      writing-mode: vertical-lr;
      writing-mode: tb-lr;
      text-align: center;
      line-height: 28px;
    }
  }

  .line {
    width: 1px;
    height: 82px;
    background-color: rgba(255, 255, 255, .1);
    margin: 0 60px;
  }

  .cright {
    display: flex;
    justify-content: space-between;
    width: 50%;
    align-items: center;

    .tt {
      font-size: 14px;
      color: #ffffff;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .dd {
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 10px;
    }

    .tel {
      font-size: 30px;
      color: #ffffff;
      font-weight: bold;
    }

    .r-btn {
      width: 158px;
      height: 38px;
      border: 1px solid #ffffff;
      font-size: 14px;
      color: #ffffff;
    }
  }


}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-box {
  padding: 52px 0 42px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  .ul-title {
    color: #ffffff;
    margin-bottom: 12px;
    font-weight: bold;
  }

  .li-link {
    font-size: 13px;
    color: #999999;
    line-height: 2.3;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
  }

  .li-link:hover {
    color: #CA0006;
  }

}

.bottom-bar {
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid #333;
  font-size: 12px;
  color: #606060;
  line-height: 22px;
}


</style>
